<template>
  <div class="category-manage">
    <div class="operation-bar">
      <a-button type="primary" @click="showAddModal">新增分类</a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="categoryList"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #action="{ record }">
        <a-space>
          <a @click="handleEdit(record)">编辑</a>
          <a-popconfirm
            title="确定要删除这个分类吗？"
            @confirm="handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <!-- 新增/编辑弹窗 -->
    <a-modal
      :title="modalTitle"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form :form="form">
        <a-form-item label="分类名称">
          <a-input
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入分类名称' }] }
            ]"
          />
        </a-form-item>
        <a-form-item label="排序">
          <a-input-number
            v-decorator="[
              'sort',
              { initialValue: 0 }
            ]"
            :min="0"
          />
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea
            v-decorator="[
              'description'
            ]"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'CategoryManage',
  data() {
    return {
      loading: false,
      modalVisible: false,
      modalTitle: '新增分类',
      form: this.$form.createForm(this),
      columns: [
        {
          title: '分类名称',
          dataIndex: 'name'
        },
        {
          title: '小说数量',
          dataIndex: 'novelCount'
        },
        {
          title: '排序',
          dataIndex: 'sort'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      categoryList: []
    }
  },
  created() {
    this.fetchCategoryList()
  },
  methods: {
    async fetchCategoryList() {
      this.loading = true
      try {
        // TODO: 调用API获取分类列表
        // const res = await this.$api.novel.getCategoryList({
        //   page: this.pagination.current,
        //   pageSize: this.pagination.pageSize
        // })
        // this.categoryList = res.data.list
        // this.pagination.total = res.data.total
      } catch (error) {
        this.$message.error('获取分类列表失败')
      }
      this.loading = false
    },
    showAddModal() {
      this.modalTitle = '新增分类'
      this.modalVisible = true
      this.form.resetFields()
    },
    handleEdit(record) {
      this.modalTitle = '编辑分类'
      this.modalVisible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: record.name,
          sort: record.sort,
          description: record.description
        })
      })
    },
    async handleModalOk() {
      try {
        const values = await new Promise((resolve, reject) => {
          this.form.validateFields((errors, values) => {
            if (errors) {
              reject(errors)
            } else {
              resolve(values)
            }
          })
        })
        
        // TODO: 调用API保存数据
        this.modalVisible = false
        this.fetchCategoryList()
      } catch (error) {
        // 表单验证失败
      }
    },
    handleModalCancel() {
      this.modalVisible = false
    },
    async handleDelete(id) {
      try {
        // TODO: 调用API删除分类
        this.$message.success('删除成功')
        this.fetchCategoryList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.fetchCategoryList()
    }
  }
}
</script>

<style lang="scss" scoped>
.category-manage {
  padding: 24px;
  
  .operation-bar {
    margin-bottom: 16px;
  }
}
</style> 